<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/src/css/xiaotao-ui.css">
    <link rel="stylesheet" href="/src/css/base.css">
    <script src="/src/js/vue.min.js"></script>
    <script src="/src/js/base.js"></script>
    <script src="/src/js/xiaotao-ui.js"></script>
    <title>System Monitor</title>
    <style>
        body,html,#app{
            background: none;
            margin: 0;
            padding: 0;
        }
        #app{
            width: 98vw;
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
        }
        .net-panel{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="app" v-if="info != null">
        <xt-card title="CPU信息">
            <table>
                <tr><td>系统运行时长：</td><td>{{info.run_time | secToDate}}</td></tr>
                <tr><td>CPU名称</td><td>{{info.cpu_info.name}}</td></tr>
                <tr><td>CPU物理核心数</td><td>{{info.cpu_info.core_count}}</td></tr>
                <tr><td>CPU逻辑核心数</td><td>{{info.cpu_info.thread_count}}</td></tr>
                <tr v-for="(item,id) in info.cpu_info.frequency" :key="id">
                    <td>CPU#{{id}} 频率</td>
                    <td>{{parseInt(item)}}   MHz</td>
                </tr>
            </table>
        </xt-card>
        <xt-card title="内存信息">
            <xt-card title="主存" style="width: 98%;">
                <table>
                    <tr><td>总量</td><td>{{getSizeString(info.memory_info.total)}}</td></tr>
                    <tr><td>使用中</td><td>{{getSizeString(info.memory_info.used)}}</td></tr>
                    <tr><td>缓冲与缓存</td><td>{{getSizeString(info.memory_info.buff_cache)}}</td></tr>
                    <tr><td>共享</td><td>{{getSizeString(info.memory_info.shared)}}</td></tr>
                    <tr><td>空闲</td><td>{{getSizeString(info.memory_info.free)}}</td></tr>
                    <tr><td>可用</td><td>{{getSizeString(info.memory_info.available)}}</td></tr>
                </table>
                <xt-prog :total="info.memory_info.total" :data="memory_info" ></xt-prog>
            </xt-card>
            <xt-card title="swap" style="width: 98%;">
                <p>用量：{{getSizeString(info.swap_info.used)}} / {{getSizeString(info.swap_info.total)}}</p>
                <xt-prog :color="XTColor['danger']" :total="info.swap_info.total" :value="info.swap_info.used"></xt-prog>
            </xt-card>
        </xt-card>
        <xt-card :title="'磁盘' + disk.device" v-for="(disk,d_key) in info.disk_info" :key="d_key">
            <xt-card :title="'分区' + partition.partition + ' 挂载：' + partition.mount"
                    v-for="(partition,p_key) in disk.partitions"
                    :key="p_key"
                    type="warning"
                    style="width: 100%;margin: 10px 0;">
                    <p>已用：{{getSizeString(partition.used)}}</p>
                    <p>总量：{{getSizeString(partition.total)}}</p>
                <xt-prog class="xt-slide-in"
                        :total="partition.total"
                        :title="getSizeString(partition.used)"
                        :value="partition.used">
                </xt-prog>
            </xt-card>
        </xt-card>
        <xt-card title="网络监控" style="width: 98%">
            <div class="net-panel">
                <xt-card :title="'接口：' + index" v-for="(net,index) in info.net_info">
                    <div>
                        <span>实时下载：{{getSizeString(net.recv_speed)}}/s</span>
                        <span>下载总量：{{getSizeString(net.recv_total)}}</span>
                    </div>
                    <div>
                        <span>实时上传：{{getSizeString(net.recv_speed)}}/s</span>
                        <span>上传总量：{{getSizeString(net.recv_total)}}</span>
                    </div>
                    <span style="color: rgb(100,100,100);font-size: 12px;">注：实时网速检测取样时间为200ms，流量通过过少时会显示0Byte/s</span>
                </xt-card>
            </div>
        </xt-card>
    </div>
    <script>
        var finish = false
        var app;
        app = new Vue({
            el:"#app",
            data:{
                info: null,
                memory_info:[],
                loading: false
            },created(){
                aoej.load()
                this.loadData()
                setInterval(() => {
                    if (this.loading != true) {
                        this.loadData()
                    }
                }, 2000);
            },filters: {
                secToDate: function(value) {
                    var d = Math.floor(value / 86400);
                    var h = Math.floor((value / 3600)%24)
                    var m = Math.floor((value / 60) % 60)
                    var s = Math.floor(value % 60)
                    return d + '天' + h + '时' + m + '分' + s + '秒'
                }
            },methods: {
                loadData() {
                    this.loading = true
                    $ajax('post','/api/getSysInf.php',null,e => {
                        this.loading = false
                        this.info = e.data.data
                        this.memory_info = [
                            { value:this.info.memory_info.used, title:"使用中", color:XTColor.warning},
                            { value:this.info.memory_info.buff_cache, title:"缓冲与缓存", color:XTColor.success}
                        ]
                        aoej.finish()
                    })
                },
            },
        })
    </script>
</body>
</html>
